import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { registerMicroApps, initGlobalState } from 'qiankun'

const globalState = { name: 'xiaobai', age: 5 }
const actions = initGlobalState(globalState)
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log('base:', state, prev)
  Object.assign(globalState, state)
})
// console.log('actions:', actions)

registerMicroApps([
  {
    name: 'reactApp',
    entry: '//localhost:3000',
    container: '#react',
    activeRule: '/app-react',
    props: { globalState },
  },
  {
    name: 'vueApp',
    entry: '//localhost:8081',
    container: '#vue',
    activeRule: '/app-vue',
    props: { globalState },
  },
  // {
  //   name: 'angularApp',
  //   entry: '//localhost:4200',
  //   container: '#container',
  //   activeRule: '/app-angular',
  // },
])

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')
